.bander{
   width: 100%; 
   height: 700px;
   background: url(../img/bgc.jpg)no-repeat center;
  background-size: cover;

}
.bander-c{
    height: 100%;
    width: 1200px;
    margin: 0 auto;
    /* background-color: antiquewhite; */
  position: relative;
}
.bander-c .btn {
  position: absolute;
  bottom: 19px;
  left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  -o-transform: translate(-50%,0);
}
.bander-c .btn div{
    float: left;
    width: 8px;
    height: 8px;
    background-color:#ffffff ;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%; 
    background-clip: padding-box;
    border: 3px solid rgba(25,35,55, 0);
    margin: 0 5px;
}
.bander-c .btn div:hover{
    background-color:  #668aca;
    border: 3px solid #ffffff;
}
.product{
    width: 100%;
    height: 1744px;
   /* background-color: #668aca; */
}
.product-c{
    width: 1200px;
    height: 100%;
    /* background-color: #668aca; */
    margin: 0 auto;
    overflow: hidden;
}
/* 表格头部 */
.pr-head{
    margin-top: 120px;
}
.pr-head p{
   font-size: 30px;
   line-height: 28px;  
}
.pr-head div{
    font-size: 12px;
    line-height: 10px;
    margin-top: 6px;
}
.pr-head .pr-line{
    width: 100%;
    height: 1px;
   
}
.pr-head .pr-line .line-l{
   width: 60px;
    height: 1px;
    float: left;
    background-color: #a1a1a1;
    margin-top: 0px;
}
.pr-head .pr-line .line-r{
    width: 300px;
     height: 1px;
     float:right;
     background-color: #a1a1a1;
     margin-top: 0px;
 }
 /* 功能区 */
 .pr-shop{
     margin: 60px auto 0;
    width: 400px;
    height:20px;
   /* backgroundcolor: aqua; */
 }
 .product  .shop-content{
     float: left;
    width: 99px;
    text-align: center;
 }
 .pr-shop .span{
    
     width: 1px;
     height: 8px;
     background-color: #b5b5b5;
     margin: 4px 0px;
 }
 .product  .shop-content a{
   font-size: 14px;
   line-height: 16px;
   text-align: center;
 }
 .product  .shop-content:hover a{
     font-size: 16px;
     color: #668aca;
 }
 .product  .shop-content.hov.shop a{
    font-size: 16px;
    color: #668aca;
}
.product .pr-shop .hov.shop::after{
    opacity: 1;
 }
 .product .pr-shop .shop::after{
    content: '';
    display: block;
    width: 12px;
    height: 1px;
    background-color: #668aca;
    /* background-color: black; */
    margin: 3px auto 0;
    opacity: 0;
 }
 .product .pr-shop .shop:hover:after  {
     opacity: 1;
 } 
 /* 项目列表 */
 .product-c .column{
     width: 1200px;
     height: 270px;
     margin:54px auto 0 ;
     /* background-color: #668aca; */
 }
 .product-c .column .column-box{
     float: left;
     margin-right: 60px;
     width: 360px;
     height: 270px;
     /* background-color: aqua; */
     border-radius: 8px;
     position: relative;
     overflow: hidden;
 }
.product-c .column .column-box .img{
    width: 360px;
    height: 180px;
    border-radius: 8px;
    background-image: url(../img/column-1.jpg)  ;
    transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;
}
.product-c .column .column-box .text{
    margin: 28px 50px 7px;
    font-size: 14px;
    height: 14px;

}
.product-c .column .column-box .text-2{
    margin: 0 50px;
    font-size: 12px;
    line-height: 12px;
}
.product-c .column .column-box .btn{
    width: 30px;
    height: 30px;
    /* background-color: #668aca; */
    background: url(../img/btn2.png) no-repeat center;
    position: absolute;
    bottom: 30px;
    right: 50px;
}
/* .product-c .column .column-box::before{
       content: '';
       display: block;
       width: 360px;
       height: 270px;
       background-color: rgba(0,0,0,.5);
       border-radius: 8px;
       position: absolute;
       margin-top: -270px;
       -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
       -ms-border-radius: 8px;
       -o-border-radius: 8px;
       transition: 0.5s;
       -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
       -ms-transition: 0.5s;
       -o-transition: 0.5s;
}
.product-c .column .column-box:hover:before{
    margin-top: 0;  
} */
.product-c .column-box .mask{
    width: 360px;
    height: 270px;
    background-color: rgba(0,0,0,.5);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 50px 58px;
    position: absolute;
    top: 0;
    left: 0;
    color: #ffffff;
       margin-top: -270px;
       transition: 0.5s;
}
.product-c .column-box .mask .text3{
    font-size: 14px;
    line-height: 15px;
    padding-bottom:4px ;
}
.product-c .column-box .mask .text4{
    font-size: 12px;
    line-height: 12px;
    padding-bottom:14px ;
}
.product-c .column-box .mask .text5{
    font-size: 12px;
    line-height: 22px;
}
.product-c .column-box .mask .btn-1{
    position: absolute;
    bottom: 60px;
    right: 50px;
    width: 36px;
    height: 36px;
    background: url(../img/btn.png)no-repeat center;
}
/* hover效果 */
.product-c .column-box:hover .mask{
    margin-top: 0px;
}
.product-c .column-box:hover .img{
    width: 360px;
    height: 270px;
    background: url(../img/column-1.jpg) no-repeat center;
    background-size: cover;
}
.product-c .column-box:hover .btn{
   opacity: 0;
}
/* 产品中心 */
.product-c .products-nav{
    margin: 0 auto;
margin-top: 54px;
width: fit-content;
/* background-color: #b5b5b5; */
overflow: hidden;
}
.product-c .products-nav li{
width: 164px;
height: 114px;
margin-right: 80px;
float: left;
/* background-color: aquamarine; */
}
.product-c .products-nav .img{
    width: 100%;
    height: 86px;
    /* background-color: #862; */
    line-height: 86px;
    text-align: center;
    position: relative;
}
    .product-c .products-nav .img img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);
        -webkit-transform: translate(-50% ,-50%);
        -moz-transform: translate(-50% ,-50%);
        -ms-transform: translate(-50% ,-50%);
        -o-transform: translate(-50% ,-50%);
    }
    .product-c .products-nav .img .blue{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);
        -webkit-transform: translate(-50% ,-50%);
        -moz-transform: translate(-50% ,-50%);
        -ms-transform: translate(-50% ,-50%);
        -o-transform: translate(-50% ,-50%);
opacity: 0;
}
    .product-c .products-nav .box{
        margin-top: 7px;
      text-align: center; 
      width: 100%;
      height: 16px; 
    }
    .product-c .products-nav .box a{
        font-size: 14px;
        line-height: 16px;
    }
    .product-c .products-nav .box .l{
        font-size: 12px;
        line-height: 16px;
        margin-left: 9px;
    }
    .product-c .products-nav li::after{
        content: '';
        display: block;
        margin: 4px auto ;
        width: 16px;
        height: 1px;
        background-color: #668aca;
     opacity: 0;
    }
    
    /* hover效果 */
    .product-c .products-nav li:hover::after{
        opacity: 1;
    }
    .product-c .products-nav li:hover .box a{
        font-size:16px;
        color: #668aca;
    }
    .product-c .products-nav li:hover .box .l{
        font-size:14px; 
    }
    .product-c .products-nav li:hover .img img{
        opacity: 0;
    }
    .product-c .products-nav li:hover .img .blue{
        opacity: 1;
    }

    .product-c .products-nav li:hover .img:first-child img{
        opacity: 1;
    }
    .product-c .products-nav li.hov .box a{
        font-size:16px;
         color: #668aca;
     }
     .product-c .products-nav li.hov::after {
opacity: 1;
     }
     .product-c .products-nav  .box .hov.l{
         font-size:14px;
         
     }
    .product-c .main{
        margin: 0 auto;
       margin-top: 110px;
     width: 1200px; 
    /* background-color: aqua; */
    overflow: hidden;

}
.product-c .main .tab{
    float: left;
    margin-right: 60px;
    width: 360px;
    height: 360px;
    /* background-color: #668aca; */
    /* background-color: chartreuse; */
    overflow: hidden;
    font-size: 0%;
    position: relative;
}
.product-c .main .tab img{
    width: 360px;
    height: 320px;
    border-radius: 8px; 
}
.product-c .main .tab .text{
line-height: 16px;
font-size: 16px;
margin-bottom: 10px;
margin-left: 92px;
transition:   0.4s  ;
}
.product-c .main .tab .txt{
    line-height: 14px;
    font-size: 14px;
    margin-left: 92px;
    transition:   0.4s  ;
    }
    .product-c .main .tab .mask{
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,.5);
      width: 360px;
      height: 320px;
      border-radius: 8px;
      transform:translatex(-100%) ;
      color: #ffffff;
     
      transition:   0.4s  ;
    }

.product-c  .tab .mask .txt-1{
font-size: 30px;
line-height: 25px;
margin-top: 131px;
margin-left: 84px;
}
.product-c  .tab .mask .txt-2{
    font-size: 16px;
    line-height: 16px;
    margin-top: 17px;
    margin-left: 69px;
    }
    .product-c  .tab .mask .txt-3{
        font-size: 14px;
        line-height: 14px;
        margin-top: 10px; 
        margin-left: 69px;    
        }
.product-c  .tab .mask  .line{
 position: absolute;
top: 154px;       
left: 0;
width: 80px;
height: 1px;
background-color: #f8f8f8;
} 
/* hover效果 */
.product-c  .tab:hover .mask{
     transform: translateX(0);
    
}
.product-c  .tab:hover .text{
    opacity: 0;
}
.product-c  .tab:hover .txt{
    opacity: 0;   
}
.service .service-hard{
width: 1200px;
height: 172px;
margin: 0 auto;
}
.service .bg{
    width: 100%;
    height: 700px;
    background: url(../img/bg-2.jpg) no-repeat center;
    background-size: cover;
}
.service .bg .bg-c{
    width: 1200px;
    height: 700px;
    /* background-color: #668aca; */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.service .bg .bg-c .txt-h{
    margin-top: 150px;
    font-size: 30px;
    line-height: 21px;
    color: #ffffff;
}
.service .bg .bg-c .txt-h1{
    margin-top: 38px;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff; 
}
.service .bg .bg-c .list{
 position: absolute;
 bottom: 149px;
 right: 3px;
 overflow: hidden;
}
.service .bg-c .list .item{
  width: 248px;
  height: 150px;
  /*background-color: #668aca;
  */float: left;
  border: 1px solid #f8f8f8;
  border-right:none ;
  transition: 0.2s;
  
}
.service .bg-c .list .item p{
    
    margin-top: 47px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
}
.service .bg-c .list .item div{
    margin: 13px auto;
    width: 30px;
	height: 1px;
	background-color: #ffffff;
}
.service .bg-c .list .item span{
    display: block;
    width: 100%;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}
.service .bg-c .list .item:hover{
    background-color: #668aca;
    transform: scale(1.05);
    border: none !important;;
}
/* 新闻部分 */
.news{
    height: 802px;
    
    overflow: hidden;
}
.news .news-c{
    height: 100%;
    width: 1200px;
    margin: 0 auto;
}
.news .news-c .box-l{
    float: left;
    width: 570px;
    height: 570px;
    /* background-color: #251; */
    margin-right: 60px;
    margin-top: 60px;
   
}
.news .news-c .box-l .box1{
    width: 570px;
    height: 270px;
    background: url(../img/news1.jpg) no-repeat center;
float: left;
overflow: hidden;
position: relative;
}
.news .news-c .box-l .box2{
    float: left;
    width: 270px;
    height: 270px;
    background: url(../img/news2.jpg) no-repeat center;
   margin-top: 30px; 
   margin-right: 30px;
}
.news .news-c .box-l .box3{
    float: left;
    width: 270px;
    height: 270px;
    background: url(../img/news3.jpg) no-repeat center;
   margin-top: 30px; 
  
}
.news .news-c .box-r{
    float: left;
    width: 570px;
    height: 570px;
    background-color: #251;
    margin-top: 60px; 
    background: url(../img/news4.jpg) no-repeat center;

}
.news .news-c .box-l .box1 .mask{
     width: 570px;
     height: 90px;
     background-color: rgba(0,0,0,0.5 );
     position: absolute;
     bottom: 0;
     left: 0;
     box-sizing: border-box;
     padding-left:50px ;
     transform: translateY(100%);
     transition:0.4s ;
   
}
 .news-c .box-l  .mask .tx{
margin-top: 11px;
font-size: 16px;
color: #ffffff;
line-height: 16px;
 }
 .news-c .box-l  .mask .t{
    font-size: 12px; 
    line-height: 22px; 
    margin-top: 11px;
    color:#ffffff;
 }
 .news-c .box-l  .mask a {
     display: block;
     position: absolute;
     bottom: 12px;
     right:50px;
     width: 30px;height: 30px;
 }
 /* hover效果 */
 .news .news-c .box-l .box1:hover .mask{
    transform: translateY(0);
   
}

/* 关于部分 */
.about {
    width: 100%;
    height: 760px;
    /* background-color: #668aca; */
    overflow: hidden;
}
.about .about-c{
    width: 1200px;
    height: 100%;
    /* background-color: #b5b5b5; */
    margin: 0 auto;
}
 .about-c .box-l{
     margin-top: 60px;
     float: left;
     width: 500px;
     height: 300px;
     margin-right: 29px;
 }
 .about-c .box-r{
    margin-top: 60px;
    width: 671px;    
    height: 300px;
    box-sizing: border-box;
    float: left;
    padding-top: 27px;
 } 
 .about-c .box-r p{
     font-size: 14px;
     line-height: 24px;
    margin-bottom: 24px;

 }